<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/assets/vue/index.css">
	<link rel="stylesheet" href="/assets/layui/css/layui.css" type="text/css">
    <title>录入</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-size: 14px;
        }

        .title {
            background-color: #409eff;
            color: #fff;
            text-align: center;
            padding: 0.8rem 0.6rem;

        }

        .el-tabs__nav {
            width: 75%;
            margin: 0 35px;
            float: none;
        }

        .el-tabs__item {
            /* width: 50%; */
            text-align: center;
            padding: 0 15%;

        }

        .el-tabs__nav-wrap::after {
            height: 1px;
        }

        .el-icon-arrow-left {
            float: left;
        }

        .el-form-item {
            margin: 0;
        }

        .el-form-item.col3 {
            width: 72%;
            margin-right: 0;
        }

        .el-form-item.col1 {
            width: 49%;
            margin-right: 0;
        }

        .el-form-item__label::after {
            content: '*';
            color: #F56C6C;
            margin-right: 4px;
        }

        .el-form {
            padding-left: 2rem;
            padding-right: 0.6rem;
        }

        .col3 .el-input {
            /*float: left;*/
            width: 60%;
        }

        .col3 .el-input+.el-input {
            margin-left: 3%;
        }
        .col3 .el-input:nth-child(3n+1) {
            margin-left: 0;
        }
        .inset {
            width: 50%;
            margin: 0.6rem 25%;
        }

        .tjBtn {
            padding: 0.4rem 0.8rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            vertical-align: middle;
        }

        .showNum {
            float: left;
            width: 25%;
            text-align: center;
            padding: 0.6rem;
            font-weight: 700;
            color: #606266;
        }

        .bs .el-input {
            width: 70%;
            margin-right: 1rem;
        }

        .bs {
            padding: 0.6rem 0.8rem;
        }
        .el-message-box{
            width: auto;
            border-radius: 0.8rem;
        }
        .el-message-box__wrapper{
            top: 5vh;
            width: 90%;
            left: 5%;
        }
    </style>
	
</head>

<body>
    <script src="/assets/vue/vue.js"></script>
    <script src="/assets/vue/index.js"></script>
    <div id="app">
        <div class="title">

            {{activeName}}
        </div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="单号录入" name="直选录入">
                <el-form :inline="true" :model="formData" class="demo-form-inline" ref="ruleForm" :rules="rules">
                    <el-form-item label="输入数字" class="col1">
                        <el-input v-for="i in 1" v-model="formData.num[i-1]" type="number" oninput="value=value.replace(/[^0-9]/g,'')" placeholder="输入数字" :key="i" size="mini">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="投入倍数" class="col1">
                        <el-input v-model="formData.multiple" placeholder="投入倍数" size="mini" type="number"></el-input>
                    </el-form-item>
                    <el-button @click="insetOne" type="primary" plain round class="inset">录入</el-button>
                </el-form>
                <el-form :inline="true" :model="formData" class="demo-form-inline" ref="ruleForm" :rules="rules">
                    <el-form-item label="输入数字（复试录入）" class="col1">
                        <el-input v-for="i in 1" v-model="formData.num1[i-1]" type="number" oninput="value=value.replace(/[^0-9]/g,'')" placeholder="输入数字" :key="i" size="mini">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="投入倍数" class="col1">
                        <el-input v-model="formData.multiple_f" placeholder="投入倍数" size="mini" type="number"></el-input>
                    </el-form-item>
                    <el-button @click="insetOne(1)" type="primary" plain round class="inset">录入</el-button>
                </el-form>
                <br><br>
                <div>
                    <el-input v-model="formData.searchno1" placeholder="请输入号码" style="width: 40%;margin-left: 50px;" size="mini" type="number"></el-input>

                        <el-button @click="searchOne" type="primary">搜索</el-button>
                </div>
                <div class="tjBtn">
                    <span>总投注数（{$beishu_count_one}）</span>
                    <span>总金额（{$beishu_count_one * 2}）</span>
                    <el-button @click="del(0)" type="danger" size="mini" class="det">清除</el-button>
                </div>

                <div>
<!--					{foreach name="listone" item="v"}-->
<!--						{foreach name="v['no_arr']" item="vv"}-->
<!--						<span  class="showNum">  {$vv} </span>-->
<!--						{/foreach}-->
<!--						<span  class="showNum">  x {$v.multiple} </span>-->
<!--					{/foreach}-->
<!--                    <span v-for="(item,key0) in no1" class="showNum" :key="key0()"> <span v-if="key0%4==0"> x </span> {{item}}-->
<!--                    </span>-->
                    <span :key="item.id" v-for="(item, index) in no1" class="showNum"> {{ (index+1) %4 == 0 ? 'x' : ''}}{{item}}
                    </span>
                </div>
            </el-tab-pane>
            <el-tab-pane label="组合录入" name="组6录入">
<!--                 <div class="bs">-->
<!--                     <el-input v-model="multiple" placeholder="投入倍数" size="mini" type="number"></el-input><span-->
<!--                         class="el-form-item__label" style="float: none;">输入柱数</span>-->
<!--                 </div>-->
                <el-form :inline="true" :model="formData" class="demo-form-inline" ref="ruleForm" :rules="rules">

                    <el-form-item label="输入数字" class="col1">
                        <el-input v-for="i in Number(multiple)" v-model="formData.num[i-1]" placeholder="输入数字" :key="i" size="mini" type="number">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="投入倍数" class="col1" style="float: right">
                        <el-input v-model="formData.multiple" placeholder="投入倍数" size="mini" type="number"></el-input>
                    </el-form-item>
                </el-form>
                <el-button @click="insetTwo" type="primary" plain round class="inset">录入</el-button>
                <br><br>
                <div>
                    <el-input v-model="formData.searchno2" placeholder="请输入号码" style="width: 40%;margin-left: 50px;" size="mini" type="number"></el-input>

                    <el-button @click="searchTwo" type="primary">搜索</el-button>
                </div>
                <div class="tjBtn">
                    <span>总投注数 ({$beishu_count_two})</span>
                    <span>总金额（{$beishu_count_two * 2}）</span>
                    <el-button @click="del(1)" type="danger" size="mini" class="det">清除</el-button>
                </div>
                <div>
<!--                    {foreach name="listtwo" item="v"}-->
<!--						{foreach name="v['no_arr']" item="vv"}-->
<!--						<span  class="showNum">  {$vv} </span>-->
<!--						{/foreach}-->
<!--						<span  class="showNum">  x {$v.multiple} </span>-->
<!--					{/foreach}-->
                    <span :key="item.id" v-for="(item, index) in no2" class="showNum"> {{ (index+1) %4 == 0 ? 'x' : ''}}{{item}}
                    </span>
                </div>
            </el-tab-pane>
            <el-tab-pane label="组三录入" name="组三录入">
                <!--                 <div class="bs">-->
                <!--                     <el-input v-model="multiple" placeholder="投入倍数" size="mini" type="number"></el-input><span-->
                <!--                         class="el-form-item__label" style="float: none;">输入柱数</span>-->
                <!--                 </div>-->
                <el-form :inline="true" :model="formData" class="demo-form-inline" ref="ruleForm" :rules="rules">

                    <el-form-item label="输入数字" class="col1">
                        <el-input v-for="i in Number(multiple)" v-model="formData.num[i-1]" placeholder="输入数字" :key="i" size="mini" type="number">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="投入倍数" class="col1" style="float: right">
                        <el-input v-model="formData.multiple3" placeholder="投入倍数" size="mini" type="number"></el-input>
                    </el-form-item>
                </el-form>
                <el-button @click="insetThree" type="primary" plain round class="inset">录入</el-button>
                <br><br>
                <div>
                    <el-input v-model="formData.searchno3" placeholder="请输入号码" style="width: 40%;margin-left: 50px;" size="mini" type="number"></el-input>

                    <el-button @click="searchThree" type="primary">搜索</el-button>
                </div>
                <div class="tjBtn">
                    <span>总投注数 ({$beishu_count_three})</span>
                    <span>总金额（{$beishu_count_three * 2}）</span>
                    <el-button @click="del(2)" type="danger" size="mini" class="det">清除</el-button>
                </div>
                <div>
                    <!--                    {foreach name="listtwo" item="v"}-->
                    <!--						{foreach name="v['no_arr']" item="vv"}-->
                    <!--						<span  class="showNum">  {$vv} </span>-->
                    <!--						{/foreach}-->
                    <!--						<span  class="showNum">  x {$v.multiple} </span>-->
                    <!--					{/foreach}-->
                    <span :key="item.id" v-for="(item, index) in no3" class="showNum"> {{ (index+1) %4 == 0 ? 'x' : ''}}{{item}}
                    </span>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
<script src="/assets/jquery.min.js"></script>
<script src="/assets/layui/layui.js"></script>

    <script>
        new Vue({
            el: '#app',
            data: {
                activeName: '直选录入',
                multiple: 1,
                formData: {
                    num: [],
                    num1: [],
                    multiple: 1,
                    multiple_f:1,
                    multiple3:1,
                    searchno1:'',
                    searchno2:'',
                    searchno3:''
                },
                rules: {

                },
                no1:JSON.parse('{$arr1}'),
                no2:JSON.parse('{$arr2}'),
                no3:JSON.parse('{$arr3}'),
            },
            mounted(){
                let name = sessionStorage.getItem('currentTab')
                // 判断是否存在currentTab，即tab页之前是否被点击切换到别的页面
                if(name){
                    this.activeName = name
                }
            },
            methods: {
                handleClick(tab, event) {
                    sessionStorage.setItem('currentTab', tab.name)
                },

                async searchOne() {
                    try {
                        const response = await fetch(`/index/index/get_list?no=${this.formData.searchno1}&type=0`);
                        this.no1 = await response.json();
                        // console.log(await response.json());
                    } catch (error) {
                        console.log(error);
                    }
                },
                async searchTwo() {
                    try {
                        const response = await fetch(`/index/index/get_list?no=${this.formData.searchno2}&type=1`);
                        this.no2 = await response.json();
                        // console.log(await response.json());
                    } catch (error) {
                        console.log(error);
                    }
                },
                async searchThree() {
                    try {
                        const response = await fetch(`/index/index/get_list?no=${this.formData.searchno3}&type=2`);
                        this.no3 = await response.json();
                        // console.log(await response.json());
                    } catch (error) {
                        console.log(error);
                    }
                },
                insetOne(is_zh=0) {
		  
		            if(is_zh == 1){
                        var number = this.formData.num1;
                        $.ajax({
                            url: "/index/index/caipiao",
                            data: {"no":number,"multiple":this.formData.multiple_f,"type":0,"is_zh":1},
                            type: 'post',
                            async: false,
                            success: function (res) {
                                layer.msg(res.msg);
                                if(res.code == 1){
                                    window.location.href = "{:url('/index/index/caipiao')}";
                                }


                            }
                        })
                    }else{
                        var number = this.formData.num;
                        $.ajax({
                            url: "/index/index/caipiao",
                            data: {"no":number,"multiple":this.formData.multiple,"type":0,"is_zh":0},
                            type: 'post',
                            async: false,
                            success: function (res) {
                                layer.msg(res.msg);
                                if(res.code == 1){
                                    window.location.href = "{:url('/index/index/caipiao')}";
                                }


                            }
                        })
                    }

                },
                insetTwo() {


                    var number = this.formData.num;
                    $.ajax({
                        url: "/index/index/caipiao",
                        data: {"no":number,"multiple":this.formData.multiple,"type":1},
                        type: 'post',
                        async: false,
                        success: function (res) {
                            layer.msg(res.msg);
                            if(res.code == 1){
                                window.location.href = "{:url('/index/index/caipiao')}";
                            }


                        }
                    })
                },
                insetThree() {


                    var number = this.formData.num;
                    $.ajax({
                        url: "/index/index/caipiao",
                        data: {"no":number,"multiple":this.formData.multiple3,"type":2},
                        type: 'post',
                        async: false,
                        success: function (res) {
                            layer.msg(res.msg);
                            if(res.code == 1){
                                window.location.href = "{:url('/index/index/caipiao')}";
                            }


                        }
                    })
                },
                del(type=0) {
                    this.$confirm('数据清除之后将无法恢复, 您确定要清除当前的数据吗?', '清除统计数据', {
                        confirmButtonText: '确定清除',
                        cancelButtonText: '取消',
                        type: 'warning',
                        center: true,
                        showClose:false,
                        closeOnClickModal: false
                    }).then(() => {
                        $.ajax({
						url: "/index/index/del_data",
						data: {type:type},
						type: 'post',
						async: false,
						success: function (res) {
							layer.msg(res.msg);
							if(res.code == 1){
								window.location.href = "{:url('/index/index/caipiao')}";
							}
							
							
						}
					})
                    }).catch(() => {
                        //取消删除
                    });

                },
                back() {
                    //返回
                }
            },
            created() {

            }
        })
    </script>



</body>

</html>